<!--
 * @Author: your name
 * @Date: 2020-07-17 16:58:19
 * @LastEditTime: 2020-07-23 17:13:41
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /waibao/iuyun-device-web/wechat/src/components/pages/financeDtail.vue
-->
<template>
    <div class="container">
      <div class="componentTopInv">
        <div class="changeMore">
          <div class="navTitle" @click="spotCheckView()"><i class="el-icon-arrow-left icon"></i><span>设备财务记录详情</span></div>
          <div class="left">
            <!--<div class="scan" :style="{transform: isAndriod?'translateY(1.5px)':'translateY(4px)'}">-->
              <!--&lt;!&ndash; <span class="iconfont icon-shaixuan" @click="changeMore" style="font-size:20px;"></span> &ndash;&gt;-->
              <!--<iconSvg name="filter" w="19px" h="19px" @click.native="changeMore" ></iconSvg>-->
            <!--</div>-->
          </div>
          <div class="right">
            <div @click="$router.push({name: 'manage'});" class="scan" :style="{transform: isAndriodDevice()?'translateY(-3.6px)':'translateY(-2.2px)'}">
              <span class="iconfont" @click="$router.push({name: 'manage'});" style="font-size:22px;">&#xe607;</span>
            </div>
            <div @click="backToHomepage" class="scan backToHomepage" :style="{transform: isAndriodDevice()?'translateY(-3.5px)':'translateY(-3.5px)','margin-right':'18px'}">
              <span class="iconfont"  v-focusable @click="backToHomepage" style="font-size:17px;"><iconSvg name="home" w="20" h="20" style="transform: translateY(-2px);" class="d_icon"></iconSvg></span>
            </div>
          </div>
        </div>
      </div>

      <!-- 内容开始 -->
      <div class="main">
            <div class="top">
              <span class="fr" style="color: hsla(0,0%,100%,.5);">
                  <span  @click="show = !show">{{show?"收起":"展开"}}</span>
                  <span class="iconfont icon1" v-if="!show">&#xe669;</span>
                  <span class="iconfont icon2" v-if="show">&#xe669;</span>
              </span>
          </div>
          <div class="row"><span class="label">所属部门</span><span class="content">{{financeDetail.departmentName}}</span></div>
          <div class="row"><span class="label">设备名称</span><span class="content">{{financeDetail.deviceName}}</span></div>
          <div class="row"><span class="label">部件名称</span><span class="content">{{financeDetail.componentName}}</span></div>
          <div v-if="show" class="row"><span class="label">类     型</span><span class="content">{{financeDetail.type == 1 ? "新购" : financeDetail.type == 2 ? "维修" : financeDetail.type == 3 ? "更换" : ""}}</span></div>
          <div v-if="show" class="row"><span class="label">关联工单</span><span class="content">{{financeDetail.thirdpartySourceId}}</span></div>
          <div v-if="show" class="row"><span class="label">实际金额</span><span class="content">{{financeDetail.actualAmount}}</span></div>
          <div v-if="show" class="row"><span class="label">备      注</span><span class="content">{{financeDetail.remark}}</span></div>
          <div v-if="show" class="row"><span class="label">提 交 人</span><span class="content">{{financeDetail.person}}</span></div>
          <div v-if="show" class="row"><span class="label">提交时间</span><span class="content">{{financeDetail.time}}</span></div>
      </div>

      <div class="log-wraper">
        <div class="title">修改日志</div>
            <div class="log-box">
                <div class="list" v-for="(item,index) in financeDetail.logs" :key="index">
                    <div class="des">{{item.content}}</div>
                    <flexbox class="row">
                      <flexbox-item><div class="flex-item">修改人：{{item.person}}</div></flexbox-item>
                      <flexbox-item><div class="flex-item">修改源：{{item.platform}}</div></flexbox-item>
                      <flexbox-item><div class="flex-item">{{item.time}}</div></flexbox-item>
                    </flexbox>
                    <div class="line"></div>
                </div>
            </div>
      </div>
      <div class="dialog" v-if="abandonedDialogVisible">
        <div class="body">
          <div class="title">确认废弃该设备财务记录？</div>
          <div style="padding: 0px 20px 10px 20px;position:relative">
          <textarea :class="{'warning':showTip}" rows="3" cols="3" type="textarea" v-model="reason"></textarea>
            <span class="palceHolder" :style="{'color':showTip?'red':''}" v-if="reason == ''">(必填)请输入废弃原因</span>
          </div>
          <div class="btngroup">
            <div class="btn1 cancel" @click="abandonedDialogVisible = false;reason=''">取消</div>
            <div class="btn2 submit" @click="submitAbandoned()">确定</div>
          </div>
        </div>
      </div>
          <div class="footer" v-if="isAuth && financeDetail.status == 5 && privilege('wechat_manage','wechat_manage:device_finance:edit')">
              <div class="btn1" @click="abandonedDialogVisible = true">废弃</div>
              <div class="btn2" @click="edit">编辑</div>
          </div>

        </div>
</template>

<script>
import DeviceDao from '../../daos/device_dao'
import request from '../../config/request.js';
import { Privilege } from "@/mixin";
import { Flexbox, FlexboxItem } from 'vux'
export default {
    name: "financeDetail",
            //返回首页的公共方法
      inject: ["backToHomepage"],

    data() {
       return {
        show:true,
        abandonedDialogVisible:false,
        financeDetail:[],
        reason:'',
        showTip:false,
        isAuth:false,
        userActionMap:{}

       }
    },
    components: {
      Flexbox,
      FlexboxItem
    },
    computed: {
      recordId(){
        return this.$route.query.recordId;
      }
    },
    mixins:[Privilege],
    watch: {
      $route(){
        this.getFinacialDetail();
      },
      reason(valn,valo){
        if(valn){
          this.showTip = false
        }
      },
      show(valn,valo){
          // this.$nextTick(() => {
          //   let mHegiht = $(".main").outerHeight()
          //   let title = $(".title").outerHeight()
          //   let x = mHegiht + title + 60;
          //   // $('.log-box').css("height","calc(100vh - "+x+"px)")
          // })
      }
    },
    mounted() {
          // this.$nextTick(() => {
          //   let mHegiht = $(".main").outerHeight()
          //   let title = $(".title").outerHeight()
          //   let x = mHegiht + title + 60;
          //   // $('.log-box').css("height","calc(100vh - "+x+"px)")
          // })
    },
    created() {

      this.getFinacialDetail();
    },
    methods: {
        spotCheckView(){
            history.back(-1)
        },
      edit(){
        this.$router.push({path: 'addFinance', query: {isAdd: 0,recordId:this.recordId}});
      },
      // blurHandle:function(){
      //   this.showTip = this.reason ? false : true
      // },
      getFinacialDetail(){
        let recordId = this.$route.query.recordId;
        DeviceDao.getFinacialDetail({id:recordId},res=>{
          this.financeDetail = res
          let user = JSON.parse(localStorage.getItem("user"))
          if(user.id == res.personId){
            this.isAuth = true
          }
          console.log(user.id == res.personId,'fff')
        })
      },
        //废弃记录提交
      submitAbandoned:function(){
        if(this.reason == ''){
          this.showTip = true
          return
        }
        DeviceDao.abandoned(
              {
                id:this.recordId,
                abolishReason: this.reason,
            },res => {
                this.abandonedDialogVisible = false;
                this.reason = ''
                 history.back(-1)
        })


      },
        // 判断是否安卓手机
        isAndriodDevice() {
          var u = navigator.userAgent;
          var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
          return isAndroid
        },
    }
}
</script>

<style lang="less" scoped>
.warning{
  border: 1px solid red!important;
}
.dialog{
  position: fixed;
  top:0;
  left: 0;
  height: 100%;
  width:100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  .body{
    width: 80%;
    text-align: center;
    border-radius: 3px;
    background: #e8e9ed;
    .title{
    padding: 20px 20px 10px 20px;
      font-weight: 400;
      font-size: 18px;
      color:#333
    }
    textarea{
      position: relative;
      width: 100%;
      border: 1px solid #ccc;
      font-size: 14px;
      padding: 10px;
    }
        .palceHolder{
          position: absolute;
          color:#ccc;
          top:10px;
          font-size: 14px;
          left: 30px;
          pointer-events: none;
          }
    .btngroup{
        text-align: center;
        width: 100%;
        height: 50px;
        font-size: 14px;
        display: flex;
        line-height: 50px;
        border-top:1px solid #dcdcdc;

    .btn1{
        border-right:1px solid #dcdcdc;
        color: #666;
        width: 49%;
    }
    .btn2{
        width: 49%;
        height: 50px;
        color:#456de6;
    }
    }
  }

}
.container{
    position: fixed;
    width: 100%;
    height: 100vh;
    background:#151624;
    overflow-y: auto;
    padding-bottom: 50px;
    .changeMore{
      color:#fff;
      background:#1f2037;
      z-index: 110;
      position: fixed;
      display: flex;
      width: 100%;
      height: 50px;
      padding: 0 !important;
      margin: 0 !important;
      /*margin-bottom: 5px !important;*/
      box-sizing: border-box;
      border-bottom: 1px solid #494a5f;
      div{
        flex:1;
      }
      .left,.right{
        // float: left;
        // width: 49.7%;
        height: 100%;
        padding: 0 !important;
        margin: 0 !important;
        .scan{
          // float: left;
          // margin-left: 30%;
          margin-top: 11px;
          display: inline-block;
        }
        .backToHomepage{
          margin-top: 11px !important;
        }
      }
      .left{
        text-align: center;
      }
      .right{
        text-align: right;
        .scan{
          margin-right: 10px;
          &:nth-child(1){
            position: relative;
            /*&::before{*/
              /*content: "";*/
              /*width: .026667rem;*/
              /*height: 30%;*/
              /*background: hsla(0,0%,100%,.4);*/
              /*position: absolute;*/
              /*top: calc(~'50% + 1px');*/
              /*left: -14px;*/
              /*-webkit-transform: translateY(-50%);*/
              /*transform: translateY(-50%);*/
              /*border-left: 0.026667rem solid rgba(255, 255, 255, 0.1);*/
            /*}*/
          }
        }
      }
      .navTitle{
        white-space: nowrap;
        display: flex;
        text-align: center;
        color: #ffffff;
        span{
          font-size: 16px;
          display: inline-block;
          height: 50px;
          line-height: 50px;
        }
        .icon{
          font-size: 20px;
          margin-left:10px;
          display: inline-block;
          height: 50px;
          line-height: 50px;
          color: #ffffff;
        }
      }
      .left{
        // width: 49.8% !important;
        // border-right: 1px solid #494a5f;
      }
    }
}
.main{
  position: relative;
    background-color: #292A4D;
    padding: 50px 10px 10px;
    font-size: 14px;
      .top{
            position: absolute;
        top: 58px;
        right: 10px;
            span{
                display: inline-block;
                &:first-child{
                    font-size: 12px;
                }
            }

            .iconfont{
                margin-right: 10px;
                font-size: 12px;
            }
            .icon2{
                transform:rotate(90deg);
                -ms-transform:rotate(90deg); 	/* IE 9 */
                -moz-transform:rotate(90deg); 	/* Firefox */
                -webkit-transform:rotate(90deg); /* Safari 和 Chrome */
                -o-transform:rotate(90deg);
            }
        }
    .row{
        width: 100%;
        margin: 10px 0;
        .label{
            color:#adadad;
            display: inline-block;
            width: 60px;
            text-align: right;
            margin-right: 25px;
        }
        .content{
            color: #fff;
        }
    }
}
.log-wraper{
    background-color: #292A4D;
    padding: 10px;
    margin-top: 10px;
    height: 100%;
    .title{
        font-size: 14px;
        font-weight: 400;
        color: #fff;
        margin-top: 10px;
        margin-bottom: 15px;
    }
    .log-box{
        // overflow-y: auto;
        .list{
            margin-top: 20px;
            .des{
                color:#fff;
                font-size: 16px;
                margin-bottom: 15px;
            }
            .row{
                margin: 0;
                color:rgba(173, 173, 173, 0.75);
            }
            .line{
                display: block;
                width: 100%;
                height: 1px;
                margin: 5px 0;
                border-bottom: 1px solid rgba(88, 88, 88, 0.7);
            }
        }
    }


}

.footer{
    position: fixed;
    bottom: 0;
    text-align: center;
    background-color: #292A4D;
    width: 100%;
    height: 50px;
    font-size: 14px;
    display: flex;
    line-height: 50px;
    .btn1{
        border:1px solid #456de6;
        color: #456de6;
        width: 40%;
    }
    .btn2{
        width: 60%;
        height: 50px;
        background-color: #456de6;
        color:#fff;
    }
}
</style>
